<template>
  <view class="map-content">
    <!-- 重新定义顶部状态栏和导航栏 -->
    <view class="top_box" :style="{'height ': statusBarHeight + 40 + 'px'}">
      <!-- 状态栏高度 -->
      <view class="status-bar" :style="{'height': statusBarHeight + 'px'}"></view>
      <view class="nav_bar u-flex" style="flex: 1">
        <u-icon name="arrow-left" color="#333333" size="40" @click="Fanhui()" style="padding: 20rpx; z-index: 10"></u-icon>
        <view class="nva_bar_content" >
          <view class="nav_bar_content_left" >{{tabTitle}}</view>
          <view class="nav_bar_title" >{{NavTitle}}</view>
        </view>
      </view>
    </view>
    <view class="map_wrap" :style="{'height': windowHeight - headerHeight + 'px'}">
      <!--地图map组件-->
      <map
          id="shopMap"
          :latitude="markers.latitude"
          :longitude="markers.longitude"
          :scale="scale"
          :markers="markerData"
          :show-location="true"
          @markertap="markerTapFun"
          @regionchange="regionChangeFun"
          :style="{'width: 100%;height': windowHeight - 305 + 'px'}"
      >
        <cover-view slot="callout">
          <block v-for="(item,index) in markerData" :key="index">
            <cover-view class="customCallout" :marker-id="item.id" @tap="gotoShopDetail(item)">
              <cover-view class="cover-content">
                <cover-view class="cover-item">
                  <cover-image class="shop_list_logo" :src="item.logo"></cover-image>
                  <cover-view class="shop_list_title ellipsis-one-line">{{item.title}}</cover-view>
                </cover-view>
                <cover-image  class="shop-list-icon" :src="imgurlBwc + 'map/caret-up.png'"></cover-image>
              </cover-view>
            </cover-view>
          </block>
        </cover-view>
        <!--当前位置小图标-->
        <view @click="currentLocation" class="current_location">
          <view class="current_location_wrap"><image :src="imgurlBwc + 'map/locat-icon.png'" class="current_location_img"></image></view>
        </view>
        <!--刷新地图-->
        <view @click="refreshMap" class="refresh_map">
          <view class="refresh_map_wrap"><image :src="imgurlBwc + 'map/refresh_icon.png'" class="refresh_map_img"></image></view>
        </view>
      </map>

      <!--搜索框-->
      <view class="search_box">
        <view class="search_content">
          <u-search
              @search="searchChange"
              v-model="searchText"
              shape="square"
              bg-color="rgba(255, 255, 255, 0.8)"
              :show-action="false"
              placeholder="请输入商家名称"
              :clearable="true"
              height="80"
              :class="'search_input' + (ifSearchText ? ' search_input_active' : '')"
          />
          <view v-if="ifSearchText" class="search_wrap">
            <scroll-view
                lower-threshold="10"
                @scrolltolower="searchReachBottom"
                :scroll-y="true" style="height: 480rpx">
              <view v-show="searchData.length > 0" class="search_wrap_box" style="padding: 0 10rpx">
                <view v-for="(item, index) in searchData" :key="index" class="search_wrap_content">
                  <view @click="selectShop(item)" class="search_wrap_content_item">
                    <image :src="item.image" class="search_wrap_content_img"></image>
                    <text class="search_wrap_content_text ellipsis-one-line">{{item.name}}</text>
                  </view>
                  <u-line color="#F0F0F0"></u-line>
                </view>
                <view class="chudijiazai">
                  <u-loadmore icon-type="flower" :status="loadingstatus" font-size="24" :load-text="loadText" margin-top="30"
                              margin-bottom="30"/>
                  <view v-if="Bottomingrefresh == true" class="Bottomingrefresh" @click="RefreshBtn()">立即刷新</view>
                </view>
              </view>
              <!-- 暂无店铺提示 -->
              <view v-if="searchData.length == 0" class="noData_box">
                <image :src="BestImgUrl + '/index/noData.png'" class="noData_box_img"></image>
                <view>你搜索的内容暂无店铺</view>
              </view>
            </scroll-view>

          </view>

        </view>
      </view>
      <view v-show=" ifSearchText" @click="closeSearch" class="search_zoom"></view>
      <!--店铺列表-->
      <view class="shop_list" :style="{'height': shopListIsOpen ?  '80%' : '610rpx'}">
        <view class="shop_list_box">
          <!--店铺列表标题-->
          <view class="shop_list_title">
            <view
                @touchstart="handleTouchStart"
                @touchmove="handleTouchMove"
                @touchend="handleTouchEnd"
                class="shop_list_title_content">
              <text class="shop_list_title_content_text">{{NavTitle}}</text>
              <view @click="shopListIsOpen = !shopListIsOpen" class="shop_list_title_icon">
                <!--<view class="shop_list_title_icon_text"></view>-->
                <view v-if="shopListIsOpen" class="shop_list_title_text">点击收起</view>
                <view v-else class="shop_list_title_text">点击展开</view>
                <u-icon :name="shopListIsOpen ? 'arrow-down' : 'arrow-up'" color="#FFFFFF" size="24" style="margin-left: 10rpx;"></u-icon>
              </view>
            </view>
            <!--店铺列表tabs选项-->
            <view class="shop_list_tabs">
              <u-tabs
                  :list="classList"
                  :is-scroll="true"
                  :current="current"
                  @change="change"
                  height="52"
                  active-color="#FFFFFF"
                  inactive-color="#888888"
                  :active-item-style="{
                    color: '#ffffff',
                    marginRight: '16rpx',
                    marginLeft: '10rpx',
                    borderRadius: '10rpx',
                    background: 'linear-gradient( 90deg, #FF8610 0%, #FF4E2C 100%)',
                    fontSize: '28rpx',
                    transition: 'all 0.3s',
                  }"
                  style="color: #ff0000"
                  bar-height="0"
                  item-width="25%"
                  gutter="0"
              ></u-tabs>
            </view>
          </view>
          <!--店铺列表-->
          <view class="shop_list_content" >
            <scroll-view
                :scroll-y="true"
                :refresher-enabled="true"
                @refresherrefresh="onrefresherrefresh"
                :refresher-triggered="isTriggered"
                refresher-default-style="none"
                lower-threshold="30"
                @scrolltolower="onScrolltolower"
                style="height: 100%">
              <!-- 加载中提示 -->
              <view class="lanjiazai_wrap" v-if="skeletonLoading">
                <view class="lanjiazai_item">
                  <u-loading color="#FFB930" size="40"></u-loading>
                  <view>正在刷新...</view>
                </view>
              </view>
              <view v-if="packageList.length != 0 && zanwuloc" style="padding: 0 20rpx">
                <view v-for="(item, index) in packageList" :key="index" class="shop_list_item">
                  <view  @click="ToShopsDetails(item)" class="shop_list_item_left">
                    <view class="shop_list_item_img">
                      <image :src="item.logo" class="shop_list_item_image"></image>
                    </view>
                    <view class="shop_list_item_content">
                      <view class="shop_list_item_content_title ellipsis-one-line">{{item.name}}</view>
                      <view class="shop_list_item_content_time">
                        <u-icon name="clock" color="#333333" size="28"></u-icon>
                        <text>10:00-23:00</text>
                      </view>
                      <view class="shop_list_item_content_address">
                        <u-icon name="map" color="#333333" size="28"></u-icon>
                        <view class="ellipsis-one-line">距您<text style="color: #FF8212">{{item.distance}}公里</text> {{item.address}}</view>
                      </view>
                    </view>
                  </view>
                  <view class="shop_list_item_right">
                    <view @click="ToShopsDetails(item)" class="shop_list_item_right_item">
                      <image :src="imgurlBwc + 'map/shop_icon.png'" class="shop_list_item_right_icon"></image>
                      <view>进店</view>
                    </view>
                    <view @click="Daohang(item)" class="shop_list_item_right_item">
                      <image :src="imgurlBwc + 'map/addres_icon.png'" class="shop_list_item_right_icon"></image>
                      <view>导航</view>
                    </view>
                  </view>
                </view>
                <view class="chudijiazai">
                  <u-loadmore icon-type="flower" :status="loadingstatus" font-size="24" :load-text="loadText" margin-top="30"
                              margin-bottom="30"/>
                  <view v-if="Bottomingrefresh == true" class="Bottomingrefresh" @click="RefreshBtn()">立即刷新</view>
                </view>
              </view>

              <!-- 暂无店铺提示 -->
              <view v-else-if="packageList.length == 0 && failTimeOutShow == true" class="noData_box">
                <image :src="BestImgUrl + '/index/noData.png'" class="noData_box_img"></image>
                <view>暂无店铺</view>
              </view>
            </scroll-view>


          </view>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
import QQMapWX from '../../../common/qqmap-wx-jssdk.min'
const app = getApp();
export default {
  data() {
    return {
      BestImgUrl: app.globalData.imgurl,
      imgurlBwc: app.globalData.imgurlBwc,
      statusBarHeight: 0, //状态栏高度
      windowHeight: '', // 获取屏幕高度
      headerHeight: 0,// 获取头部高度
      shopListHeight: '', //  获取店铺列表高度
      //地图店铺列表
      markers: {
        latitude: '',
        longitude: '',
        iconPath: '',
      },
      markerData: [],
      scale: 16, //地图缩放级别
      //每页显示多少条数据
      mapSize: 1, // 当前页数
      mapNum: 10, // 每页显示条数
      NavTitle: '附近店铺', //页面标题
      tabTitle: '精选',
      // tabs选项
      current: 0, // 当前选中的tab索引
      classList: [], // 分类列表
      classId: '', //  分类ID
      shopList: [], // 附近店铺数据
      packageList: [], //  套餐列表
      searchData: [],// 搜索数据
      shopListIsOpen:  false, //店铺列表是否打开一半
      skeletonLoading: false, //加载中图片
      Address: '正在定位...',
      Bottomingrefresh: false,
      loadingstatus: 'loading',
      loadText: {
        loadmore: '轻轻上拉',
        loading: '加载中...',
        nomore: '没有更多了'
      },
      failTimeOutShow: false,// 控制内容显示
      zanwuloc: true,
      searchText: '', // 搜索框内容
      ifSearchText: false, // 搜索框内容是否显示
      qqmapsdk: '', //地图搜索KEY对象
      startY: 0, // 触摸开始时的Y坐标
      moveY: 0, // 触摸移动时的Y坐标
      direction: '', // 滑动方向
      isTriggered:  false, // 下拉刷新是否触发
    };
  },
  onLoad() {
    // 获取当前位置坐标
    this.markers  = {
      id: 0,
      latitude: uni.getStorageSync('lat'),
      longitude: uni.getStorageSync('lng'),
      iconPath: this.imgurlBwc + 'map/locat-icon2.png',
      width: 20,
      height: 20,
    }
    // this.markerData = this.markerData.concat(this.markers)
    // 顶部安全区域高度
    this.statusBarHeight = uni.getWindowInfo().statusBarHeight
    // 获取屏幕高度
    this.windowHeight = uni.getWindowInfo().windowHeight
    // 获取头部高度
    uni.createSelectorQuery().select('.top_box').boundingClientRect(rect => {
      //console.log('height：', rect); // 输出元素的高度
      this.headerHeight = Number('height' in rect ? rect.height : '')
    }).exec();
    // 获取底部店铺列表高度
    uni.createSelectorQuery().select('.shop_list').boundingClientRect(rect => {
      //console.log('height：', rect); // 输出元素的高度
      this.shopListHeight = Number('height' in rect ? rect.height : '')
    }).exec();
    console.log('屏幕高度=', this.windowHeight)
    this.qqmapsdk = new QQMapWX({
      key: '5SDBZ-ECP65-OPFI4-IKQBD-BLCTE-2KFT7'
    });
    // 附近店铺
    this.getShopNearByList()
    // 套餐列表
    this.getShopLists()
    // 分类列表
    this.getClassList()
  },

  methods: {
    //tab选项
    change(e) {
      let that = this
      console.log('e', e)
      this.current = e.index;
      const tabData = this.classList[e.index]
      if (e.index === 0) {
        that.classId = ""
      } else {
        that.classId = tabData.id
      }
      that.loadingstatus = 'nomore'
      that.Bottomingrefresh = false
      that.failTimeOutShow = false
      that.skeletonLoading = true
      that.zanwuloc = false
      that.mapSize = 1
      that.pageNum = 10
      setTimeout(() => {
        that.getShopLists()
      }, 500)
    },
    // 下拉刷新
    onrefresherrefresh(){
      let that = this
      console.log('已到顶部');
      that.skeletonLoading = true
      // 开启 下拉刷新
      that.isTriggered = true
      that.mapSize = 1
      that.mapNum = 10
      // 下拉刷新清空数据
      that.shopsLists = []
      setTimeout(function () {
        that.getShopLists()
        uni.stopPullDownRefresh();
        // 关闭 下拉刷新
        that.isTriggered = false
      }, 1500);
    },
    //触底加载
    onScrolltolower() {
      let that = this
      that.loadText.nomore = '没有更多了'
      that.Bottomingrefresh = false
      that.loadingstatus = 'loading';
      if (that.zanwuloc == true) {
        setTimeout(function () {
          console.log('已滚动到底部');
          that.mapSize++
          that.getShopLists()
          uni.hideNavigationBarLoading()
        }, 500);
      } else {
        setTimeout(function () {
          uni.hideNavigationBarLoading()
        }, 500);
      }
    },
    //获取分类数据
    getClassList() {
      let that = this
      // 获取探店分类接口
      that.$api.bwcShopscategory({}).then(res => {
        // console.log('分类', res.data.result);
        this.classList = res.data.result
      }).catch(err => {
        uni.showModal({
          title: '提示',
          content: '获取分类失败，请联系管理员。',
          confirmText: '确定',
        })
      })
    },
    // 获取店铺列表
    getShopLists() {
      let that = this
      // 获取当前位置城市名
      let CityName = uni.getStorageSync('CityName')
      let Province = uni.getStorageSync('Province')
      that.$api.Getshopslist({
        page: that.mapSize,
        limit: that.mapNum,
        lat: this.markers.latitude,
        lng: this.markers.longitude,
        province: Province,
        city: CityName,
        category_id: that.classId,
      }).then(res => {
        // console.log('店铺列表', res)
        if (res.data.code == 200) {
          that.loadText.nomore = '没有更多了'
          that.Bottomingrefresh = false
          that.failTimeOutShow  = true
          if (that.mapSize != 1) {
            if (res.data.result.length != 0) {
              that.loadingstatus = 'loading';
              that.packageList = that.packageList.concat(res.data.result)
            } else {
              that.loadingstatus = 'nomore'

            }
          } else {
            that.packageList = res.data.result
            that.loadingstatus = 'nomore'
          }
          that.skeletonLoading = false
          that.zanwuloc  = true
        } else {
          uni.showToast({
            title: res.data.msg,
            icon: 'none'
          })
        }
      })
    },

    // 获取附近店铺列表
    getShopNearByList() {
      let that = this
      that.mapNum = 100
      that.$api.GetshopsNearbyListAPI({
        page: this.mapSize,
        per_page: that.mapNum,
        lat: this.markers.latitude,
        lng: this.markers.longitude,
        radius:  30000,
        search_key: that.searchText,
      }).then(res => {

        if (res.data.code == 200) {
          if (res.data.result.length > 0){
            // console.log('附近店铺列表===', that.markerData)
            res.data.result.forEach(item => {
              that.markerData.push({
                id: item.id,
                packId: item.packId,
                latitude: item.location.lat,
                longitude: item.location.lng,
                title: item.name,
                width: 30,
                height: 30,
                iconPath: item.image,
                logo:  item.image,
                /* label:{
                  content: item.name,
                  color:"#3D3D3D",//文本颜色
                  fontSize:12,//文字大小
                  borderWidth:10,//边框宽度
                  borderColor:'#ffffff',//边框颜色
                  borderRadius:6,//边框圆角
                  bgColor:"#ffffff",//背景色
                  padding:3,//文本边缘留白
                  textAlign:"center",//文本对齐方式。有效值: left, right, center
                }, *///为标记点旁边增加标签
                joinCluster: false,
                customCallout: {
                  anchorY: 10, // Y轴偏移量
                  anchorX: 0, // X轴偏移量
                  display: "BYCLICK" // 一直展示, ALWAYS:展示，BYCLICK:不展示
                },
              })
            })
          } else {
            that.failTimeOutShow  = true
          }

          console.log('搜索列表', that.markerData)
        } else {
          uni.showToast({
            title: res.data.msg,
            icon: 'none'
          })
        }
      })
    },
    // 搜索附近店铺
    searchChange(){
      let that = this
      that.ifSearchText  = true
      that.mapSize = 1
      console.log('数据分页', that.mapSize)
      console.log('搜索内容', that.searchData)
      // that.searchData  = []
      that.searchDataFun()

    },
    searchDataFun(){
      let that = this
      that.mapNum = 10
      that.$api.GetshopsNearbyListAPI({
        page: that.mapSize,
        per_page: that.mapNum,
        lat: that.markers.latitude,
        lng: that.markers.longitude,
        radius:  30000,
        search_key: that.searchText,
      }).then(res => {
        console.log('附近店铺列表===', res)
        // console.log('重新搜素附近店铺列表===', that.searchData)
        console.log('搜索列表', res.data.result)
        if (res.data.code == 200){
          that.loadText.nomore = '没有更多了'
          that.Bottomingrefresh = false
          that.failTimeOutShow  = true
          if (that.mapSize != 1) {
            if (res.data.result.length != 0) {
              that.loadingstatus = 'loading';
              that.searchData = that.searchData.concat(res.data.result)
            } else {
              that.loadingstatus = 'nomore'

            }
          } else {
            that.searchData = res.data.result
            that.loadingstatus = 'nomore'
          }
          that.skeletonLoading = false
          that.zanwuloc  = true
        }
      })
    },
    //触底加载
    searchReachBottom() {
      console.log('已滚动到底部');
      let that = this
      that.loadText.nomore = '没有更多了'
      that.Bottomingrefresh = false
      that.loadingstatus = 'loading';
      if (that.zanwuloc == true) {

        setTimeout(function () {
          that.mapSize++
          that.searchDataFun()
          uni.hideNavigationBarLoading()
        }, 500);
      } else {
        setTimeout(function () {
          uni.hideNavigationBarLoading()
        }, 500);
      }
    },
    // 选择搜索出来的店铺
    selectShop(res){
      let that = this
      console.log('选择店铺', res)
      let GPS = {
        latitude: res.location.lat,
        longitude: res.location.lng
      }
      console.log('GPS', GPS)
      that.ifSearchText  = false
      that.searchText  = res.title
      /* that.markerData  = [{
        id: res.id,
        latitude: res.location.latitude,
        longitude: res.location.longitude,
        title: res.name,
        width: 10,
        height: 10,
        iconPath: res.image,
        logo:  res.image,
        label:{
          content: res.name,
          color:"#3D3D3D",//文本颜色
          fontSize:12,//文字大小
          borderWidth:30,//边框宽度
          borderColor:'#ffffff',//边框颜色
          borderRadius:6,//边框圆角
          bgColor:"#ffffff",//背景色
          padding:3,//文本边缘留白
          textAlign:"center",//文本对齐方式。有效值: left, right, center
        },//为标记点旁边增加标签
        joinCluster: false,
        /!* customCallout: {
          anchorY: 10, // Y轴偏移量
          anchorX: 0, // X轴偏移量
          display: "ALWAYS" // 一直展示
        }, *!/
      }] */
      that.moveToLocationFun(GPS)
    },
    // 点击marker标记点
    markerTapFun(e){
      let that = this
      console.log('点击marker', e)
      const clickedMarkerId = e.detail.markerId;
      that.markerData = that.markerData.map(marker => {
        return {
          ...marker,
          customCallout: {
            ...marker.customCallout,
            display: marker.id === clickedMarkerId ? "ALWAYS" : "BYCLICK"
          }
        };
      });
      setTimeout(function () {
        uni.navigateTo({
          url: '/subpackageB/pages/shopsDetails/shopsMapDetails?shops_id=' + e.detail.markerId
        })
      },1500)
    },

    // 跳转到店铺详情
    gotoShopDetail(res){
      let that = this
      console.log('跳转到店铺详情', res)
      /* uni.navigateTo({
        url: '/subpackageB/pages/shopsDetails/shopsMapDetails?shops_id=' + res.markerId
      }) */
    },
    // 视野发生变化时触发
    regionChangeFun(e){
      let that = this
      console.log('视野发生变化时触发', e)

      // 地图移动后清空关键字
      that.searchText = '';
      that.mapSize++
      that.getShopNearByList()
    },
    // 刷新地图
    refreshMap(){
      let that = this
      that.mapSize = 1
      that.markerData = []
      that.markers  = {
        id: 0,
        latitude: uni.getStorageSync('lat'),
        longitude: uni.getStorageSync('lng'),
        iconPath: that.imgurlBwc + 'map/locat-icon2.png',
        width: 20,
        height: 20,
      }
      // that.markerData = that.markerData.concat(that.markers)
      that.getShopLists()
      that.currentLocation()
    },
    // 移动到当前位置
    currentLocation(){
      let that = this
      // 获取当前位置
      uni.getLocation({
        type: 'gcj02',
        success: function (res) {
          console.log('当前位置', res)
          that.markers = {
            latitude: res.latitude,
            longitude: res.longitude,
          }
          that.moveToLocationFun(that.markers)
          that.getShopNearByList()
        }
      });
    },

    // 移动到地图指定位置
    moveToLocationFun(res){
      console.log('移动到地图指定位置', res)
      let that = this
      // 使用moveToLocation方法移动地图中心
      const mapContext = uni.createMapContext('shopMap'); // 'shopMap'是<map>组件的id
      mapContext.moveToLocation({
        latitude: res.latitude,
        longitude: res.longitude,
        zoom: 18, // 设置缩放级别
      });
    },
    // 关闭搜索弹窗
    closeSearch(){
      this.ifSearchText  = false
    },
    //触底加载中的刷新
    RefreshBtn() {
      let that = this
      that.loadingstatus = 'loading'
      that.loadText.nomore = '没有更多了'
      that.Bottomingrefresh = false
      that.getShopLists()
    },
    // 进入店铺事件
    ToShopsDetails(res) {
      console.log('店铺信息=',res)
      uni.navigateTo({
        url: '/subpackageB/pages/shopsDetails/shopsMapDetails?shops_id=' + res.id
      })
    },
    // 微信导航事件
    Daohang(res) {
      wx.openLocation({
        latitude: Number(res.latitude),
        longitude: Number(res.longitude),
        scale: 18,
        name: res.name,
        address: res.address
      });
    },
    handleTouchStart(event) {
      this.startY = event.touches[0].clientY; // 记录触摸开始时的Y坐标
    },
    handleTouchMove(event) {
      this.moveY = event.touches[0].clientY; // 记录触摸移动时的Y坐标
      // 计算滑动方向
      if (this.moveY > this.startY) {
        this.direction = 'down'; // 向下滑动
      } else {
        this.direction = 'up'; // 向上滑动
      }
    },
    handleTouchEnd() {
      // 可以在这里根据this.direction来执行相应的逻辑，例如：
      if (this.direction === 'down') {
        console.log('向下滑动');
        this.shopListIsOpen = false;
        // 执行向下滑动的逻辑
      } else if (this.direction === 'up') {
        console.log('向上滑动');
        // 执行向上滑动的逻辑
        this.shopListIsOpen = true;
      }
    },

    Fanhui() {
      uni.navigateBack()
    },
  },
}
</script>

<style lang="scss">
page {
  height: 100%;
  background-color: #f5f5f5;
}
.map-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  position:relative;
  //自定义导航栏css
  .top_box {
    position: relative;
    z-index: 10;
    background: linear-gradient( 180deg, #F4D513 0%, #FAE437 98%);
    .status-bar {
      height: var(--status-bar-height) + 'px';
    }
    .nav_bar {
      height: 80rpx;
      position: relative;
      .nva_bar_content{
        flex: 1;
        text-align: center;
        position: absolute;
        left: 0;
        right: 0;
        .nav_bar_content_left {
          width: 80rpx;
          height: 40rpx;
          line-height: 40rpx;
          display: inline-block;
          margin-right: 10rpx;
          font-size: 24rpx;
          color: #FFFFFF;
          background: #FE2B3C;
          border-radius: 10rpx;
        }
        .nav_bar_title {
          display: inline-block;
          font-size: 32rpx;
          font-weight: bold;
          color: #3D3D3D;
          margin-right: 10rpx;
        }
        .nav_bar_content_right {
          display: inline-block;
          color: #FF5F15;
          font-size: 32rpx;
          font-weight: bold;
        }
      }
      image {
        width: 56rpx;
        height: 56rpx;
      }
    }
  }
  // 地图css
  .map_wrap {
    flex: 1;
    position: relative;
    overflow: hidden;
    // 搜索css
    .search_box {

      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 10;
      padding: 20rpx;
      .search_content{
        max-height: 581rpx;
        display: flex;
        flex-direction: column;
        .search_input {
          flex: 1;
          width: 100%;
          height: 80rpx;
          line-height: 80rpx;
          box-shadow: 0rpx 8rpx 32rpx 0rpx rgba(0,0,0,0.1);
        }
        .u-content {
          width: 80rpx;
          height: 80rpx;
          line-height: 80rpx;
          text-align: center;
          border-radius: 10rpx;
          color: #FFFFFF;
          .u-input{
            background: none !important;
          }
        }
        .search_input_active{
          .u-content {
            border-radius: 10rpx 10rpx 0 0 !important;
          }
        }

      }

    }
    /* 搜索弹窗 */
    .search_wrap{
      flex: 1;
      background: #FFFFFF;
      border-radius: 0 0 20rpx 20rpx;
      overflow-y: auto;
      .search_wrap_content{
        margin-bottom: 10rpx;
        .search_wrap_content_item{
          display: flex;
          align-items: center;
          padding: 20rpx 0;
          .search_wrap_content_img{
            width: 40rpx;
            height: 40rpx;
            margin-right: 10rpx;
          }
          .search_wrap_content_text{
            font-size: 28rpx;
            color: #3D3D3D;
          }
        }
      }
    }
    .search_zoom{
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 9;
      background: rgba(0,0,0,0.2);
    }
    // 店铺列表css
    .shop_list {

      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 10;
      background: linear-gradient( 180deg, #FFFFFF 0%, #F4F4F4 20%);
      border-radius: 30rpx;
      .shop_list_box{
        height: 100%;
        display: flex;
        flex-direction: column;
        position: relative;
        /* 店铺列表标题css */
        .shop_list_title{
          height: 160rpx;
          padding: 10rpx 20rpx 0;
          .shop_list_title_content{
            height: 80rpx;
            line-height: 80rpx;
            position: relative;
            .shop_list_title_content_text{
              font-size: 32rpx;
              color: #3D3D3D;
              position: absolute;
              left: 0;
            }
            .shop_list_title_icon{
              width: 160rpx;
              height: 50rpx;
              line-height: 50rpx;
              text-align: center;
              position: absolute;
              top: -70rpx;
              left: 0;
              right: 0;
              margin: 0 auto;
              color: #FFFFFF;
              background: rgba(0,0,0,0.4);
              border-radius: 30rpx;
              .shop_list_title_icon_text{
                width: 80rpx;
                height: 8rpx;
                background: rgba(0,0,0,0.4);
                border-radius: 6rpx;
              }
              .shop_list_title_text{
                font-size: 24rpx;
                display: inline-block;
              }
            }
          }
          .shop_list_tabs{
            width: 100%;
            .u-tabs{
              background: none !important;
            }
            .u-tab-item{
              margin-right: 20rpx;
              border-radius: 10rpx;
              background: #FFFFFF;

            }
          }
        }
        /* 店铺列表内容css */
        .shop_list_content{
          flex: 1;
          overflow-y: auto;
          .shop_list_item{
            padding: 16rpx;
            border-radius: 16rpx;
            display: flex;
            justify-content: space-between;
            background: #FFFFFF;
            margin-bottom: 20rpx;
            .shop_list_item_left{
              display: flex;
              justify-content: space-between;
              width: calc(100% - 140rpx);
              .shop_list_item_img{
                width: 120rpx;
                height: 120rpx;
                border-radius: 16rpx;
                overflow: hidden;
                .shop_list_item_image{
                  width: 100%;
                  height: 100%;
                }
              }
              .shop_list_item_content{
                width: calc(100% - 130rpx);
                .shop_list_item_content_title{
                  font-size: 28rpx;
                  color: #3D3D3D;
                  margin: 6rpx 0;
                }
                .shop_list_item_content_time{
                  display: flex;
                  color: #888888;
                  font-size: 24rpx;
                  padding: 8rpx 0;
                }
                .shop_list_item_content_address{
                  display: flex;
                  color: #888888;
                  font-size: 24rpx;
                  padding: 8rpx 0;
                }
              }
            }
            .shop_list_item_right{
              display: flex;
              justify-content: space-between;
              width: 140rpx;
              .shop_list_item_right_item{
                text-align: center;
                padding: 20rpx 0;
                font-size: 24rpx;
                color: #666666;
                .shop_list_item_right_icon{
                  width: 40rpx;
                  height: 40rpx;
                }
              }
            }
          }
        }
      }
    }

    /* 当前位置小图标 */
    .current_location{
      width: 70rpx;
      height: 70rpx;
      display: flex;
      align-items: center;
      position: absolute;
      right: 20rpx;
      bottom: 400rpx;
      z-index: 10;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.4);
      .current_location_wrap{
        width: 50rpx;
        height: 50rpx;
        margin: 0 auto;
        display: flex;
        align-items: center;
        border-radius: 50%;
        background: #FFFFFF;
        .current_location_img{
          width: 36rpx;
          height: 36rpx;
          margin: 0 auto;
        }
      }
    }
    /* 刷新地图 */
    .refresh_map{
      width: 70rpx;
      height: 70rpx;
      display: flex;
      align-items: center;
      position: absolute;
      right: 20rpx;
      bottom: 300rpx;
      z-index: 10;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.4);
      .refresh_map_wrap{
        width: 50rpx;
        height: 50rpx;
        margin: 0 auto;
        display: flex;
        align-items: center;
        border-radius: 50%;
        background: #FFFFFF;
        .refresh_map_img{
          width: 34rpx;
          height: 34rpx;
          margin: 0 auto;
        }
      }
    }
  }
}
.lanjiazai_wrap {
  position: relative;
  z-index: 10000;
  height: 100rpx;
  text-align: center;
  color: #999;
  .lanjiazai_item {
    text-align: center;
  }
}
.noData_box {
  margin-top: 0;
  text-align: center;
  color: #999;
  .noData_box_img {
    width: 240rpx;
    height: 240rpx;
  }
}
// cover插槽
.cover-content {
  width: 280rpx;
  height: 110rpx;
  position: relative;
  z-index: 100000;
  .cover-item{
    padding: 10rpx;
    background: #FFFFFF;
    border-radius: 20rpx;
    display: flex;
    align-items: center;
    .shop_list_logo{
      width: 68rpx;
      height: 68rpx;
      margin-right: 10rpx;
    }
    .shop_list_title{
      width: calc(100% - 80rpx);
    }
  }


  // 三角形
  .shop-list-icon {
    width: 64rpx;
    height: 64rpx;
    margin: -20rpx auto 0;
  }
}

input::placeholder  {
  color: #999999;
}
</style>
